/*!
 * Ext JS Library 3.0.3
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
Ext.onReady(function() {

	var xg = Ext.grid;

	var tplWidth = 750;
	var tplTitle = '<div class="x-panel-header" style="-moz-user-select: none;"><span class="x-panel-header-text">明细</span></div>'
	var tplHeader = '<div class="x-list-header"><div class="x-list-header-inner" style="cursor: pointer;"><div style="width: 25%; text-align: left;"><em>属性</em></div><div style="width: 25%; text-align: left;"><em>属性3</em></div><div style="width: 25%; text-align: left;"><em>属性3</em></div><div style="width: 25%; text-align: left;"><em>属性4</em></div><div class="x-clear"></div></div></div>'
	var tplBody = '<div class="x-list-body"><div class="x-list-body-inner"><tpl for="detail"><dl><dt style="width: 25%; text-align: left;"><em>{field}</em></dt><dt style="width: 25%; text-align: left;"><em>{field2}</em></dt><dt style="width: 25%; text-align: left;"><em>{field3}</em></dt><dt style="width: 25%; text-align: left;"><em>{field4}</em></dt><div class="x-clear"></div></dl></tpl></div></div>'
	var tpl = new Ext.XTemplate('<div class="x-panel" style="width:'
			+ tplWidth
			+ 'px;">'
			+ '<div class="x-panel-bwrap"><div class="x-panel-body x-panel-body-noheader" style="width: '
			+ (tplWidth - 2) + 'px; height: auto;"><div class="x-list-wrap">'
			+ tplHeader + tplBody + '</div></div></div></div>');

	var expander = new Ext.ux.grid.RowExpander({
				tpl	: tpl
			});

	var fields = ['company', 'price', 'change', 'pctChange', 'detail'];
	var store = new Ext.data.GroupingStore({
				proxy		: new Ext.data.HttpProxy({
							url		: 'data.json',
							method	: 'GET'
						}),
				reader		: new Ext.data.JsonReader({
							root			: 'data',
							fields			: fields
						}),
				autoLoad	: true
			});

	var grid = new xg.GridPanel({
				plugins			: expander,
				store			: store,
				cm				: new xg.ColumnModel({
							defaults	: {
								width		: 20,
								sortable	: true
							},
							columns		: [expander, {
										id			: 'company',
										header		: "公司",
										width		: 40,
										dataIndex	: 'company'
									}, {
										header		: "每股售价",
										dataIndex	: 'price'
									}, {
										header		: "波动值",
										dataIndex	: 'change'
									}, {
										header		: "波动率",
										dataIndex	: 'pctChange'
									}]
						}),
				viewConfig		: {
					forceFit	: true
				}
			});

	new Ext.Viewport({
				layout	: 'fit',
				items	: grid
			});
}
);